document.addEventListener('DOMContentLoaded', function () {
    const chatMessages = document.getElementById('chat-messages');
    const userInput = document.getElementById('user-input');
    const sendButton = document.getElementById('send-button');

    sendButton.addEventListener('click', function () {
        const message = userInput.value.trim();
        if (message) {
            // 添加用户消息，让消息靠右显示
            const userMessageDiv = document.createElement('div');
            userMessageDiv.classList.add('d-flex', 'justify-content-end'); // 修改为靠右对齐
            userMessageDiv.innerHTML = `
                <div class="user-msg p-3 rounded-lg max-w-md">
                    <p class="text-gray-700">${message}</p>
                    <p class="text-xs text-gray-500 mt-1 text-end">用户 - ${new Date().toLocaleString()}</p>
                </div>
            `;
            chatMessages.appendChild(userMessageDiv);

            // 模拟客服回复，让消息靠左显示
            const serviceMessageDiv = document.createElement('div');
            serviceMessageDiv.classList.add('d-flex', 'justify-content-start'); // 修改为靠左对齐
            serviceMessageDiv.innerHTML = `
                <div class="service-msg p-3 rounded-lg max-w-md">
                    <p class="text-gray-700">亲，稍等，我马上为您处理</p>
                    <p class="text-xs text-gray-500 mt-1 text-end">客服 - ${new Date().toLocaleString()}</p>
                </div>
            `;
            chatMessages.appendChild(serviceMessageDiv);

            // 清空输入框
            userInput.value = '';

            // 滚动到最新消息
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
    });

    // 支持按回车键发送消息
    userInput.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') {
            sendButton.click();
        }
    });
});